<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button1</title>
</head>
<body>
    <!--
        3、CSS  层叠样式表(英文全称：(Cascading Style Sheets)   能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 ,简单来说,美化页面
            3.1 CSS引入方式
                3.1.1行内式  通过元素开始标签的style属性引入, 
                        样式语法为：样式名:样式值; 样式名:样式值;
                        + 缺点
                            + html代码和css样式代码交织在一起,增加阅读难度和维护成本
                            + css样式代码仅对当前元素有效,代码重复量高,复用度低
    -->
    <input 
        type="button" 
        value="按钮"
        style="
            display: block;
            width: 60px; 
            height: 40px; 
            background-color: rgb(52, 25, 228); 
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
        "
    /> 
</body>
</html>